<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/d3/5.9.7/d3.js"></script>
  <style>
    #container div {
      display: inline-block;
      background: #4285F4;
      width: 20px;
      margin-right: 3px;
    }
  </style>
</head>

<body>
  <div id='container'>
    <!-- <div style="height: 40px;"></div>
    <div style="height: 80px;"></div> -->
  </div>

  <svg id="chart" height="100" width="200">
    <!-- <path stroke-width="2" d="M0,70L50,80L100,60L150,20L200,5"> -->
  </svg>

  <script>
    // d3.select("#container").selectAll('div').data([40, 80]).enter().append("div").style("height", function (d) { return d + "px" });

    const data = [
      { x: 0, y: 30 },
      { x: 50, y: 20 },
      { x: 100, y: 40 },
      { x: 150, y: 80 },
      { x: 200, y: 95 }
    ]
    const line = d3.line()
      .x((d) => d.x)
      .y((d) => 100 - d.y)
      .interpolate("linear")

    d3.select('#chart')
      .append("path")
      .attr('stroke-width', 2)
      .attr('d', line(data))
    // d3.interval(function(){
    //  d3.select("#slider").transition()
    //   .duration(1000)
    //   .attrTween("width", function() {
    //    var i = d3.interpolate(20, 400);
    //    var ci = d3.interpolate('#2394F5', '#BDF436');
    //    var that = this;
    //    return function(t) {
    //     that.style.width = i(t) + 'px';
    //     that.style.background = ci(t);
    //    };
    //   });
    // },1500)
  </script>
</body>